<template>
  <el-dialog
    title="选择项目"
    align='left'
    :visible.sync="popDialog"
    width="800px"
    style="overflow:hidden"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    >
      <div class="project">
        <div class="project-left">
          <el-table
            ref="treeLoadTable"
            :data="tableParams.tableData"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            @row-click="openDetails"
          >
            <template v-for="(item,index) in tableParams.tableHeader">
              <el-table-column show-overflow-tooltip :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :sortable="item.isSortable">
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="project-right">
          <div class="project-right-top">
            <standardTableComponent ref="tableStand" v-bind="tableHeaderData"></standardTableComponent>
          </div>
<!--          <div class="project-right-bottom">-->
<!--            <standardTableComponent ref="table" v-bind="tableHeaderData"></standardTableComponent>-->
<!--          </div>-->
        </div>
      </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="closePop">取 消</el-button>
            <el-button type="primary" @click="ensureHandle">确 定</el-button>
        </span>
  </el-dialog>
</template>
<script>
import TreeTable from '@/components/treeTableTemplate'
import standardTableComponent from '@/components/baseComponents/StandardTable'
export default {
  components:{
    TreeTable,
    standardTableComponent
  },
  props:{
    popDialog:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      tableHeaderData:{
        tableRowClassName:this.tableRowClassNameColor,
        // 表格接口地址  详细地址在api配置
        // url:urlCommon.queryApi.url,
        // height:''
        // apiName: queryApi,//"queryApi"
        tableStyle: 1, //1--主子表格上下布局  2---主子表格左右布局
        // 风格主题
        // tooltip:"dark",
        // 表头数据
        columns:[
          {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
          {prop: 'classificationStr', label: '风控编号', align: 'center',type:"dictionary",fixed:'',isShow:false},
          {prop: 'levelString',label: '动火项目', align: 'center',type:"dictionary",fixed:'',isShow:true},
          {prop: 'levelDesc', label: '作业类型', align: 'center',type:"dictionary",fixed:'',isShow:true,isSortable:"custom"},

        ],
        // 表格数据
        tableData: [
          {id:1,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护口罩","commodityTypeId":"10000","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}],seriesType:"pillar"}},
          {id:2,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}],seriesType:"pillar"}},
          {id:3,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:4,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:5,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:6,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:7,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:8,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:9,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:10,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:11,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:12,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:13,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:14,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:15,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:16,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
          {id:17,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '蒸发量',type: 'bar',data: [2.0, 4.9]},{name: '降水量',type: 'bar',data: [2.6, 5.9]},{name: '平均温度',type: 'line',yAxisIndex: 1,data: [2.0, 2.2]}],seriesType:"pillarLine"}},

        ],
        //主表主键  主子表的时候必填
        id: "id",
        // 分页
        pageSizeOpt: ['10','20','50','100','200'],
        pageNum:1,
        pageSize:10,
        // 表格高度最大值
        maxHeight:400, //上下布局主子表250 单表450
        width:100,
      },
      // dialogVisible:false,
      tableParams:{
        //接口方法
        // apiName:'',//"queryApi"
        // 表头数据
        tableHeader:[
          // {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
          {prop: 'name', label: '组织', align: 'left',type:"input",fixed:'',isShow:false},
          // {prop: 'date',label: '日期', align: 'center',type:"dictionary",fixed:'',isShow:true},
          // propString 最后要转换为文字的字段 formatterArrayString:"LEVEL",
          //filterProp:自定义数据字典  filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}]
          //formatterArrayString:接口返回数据字典数据名 例如:"LEVEL" "IS_MARRY"
          // {prop: 'address', label: '地址', align: 'center',type:"",fixed:'',isShow:true,isSortable:true}
        ],
        //表格数据
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          hasChildren:true
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          hasChildren:true
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren:true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      }
    }
  },
  mounted(){
    this.initTable()
  },
  methods:{
    initTable() {
      // debugger;
      // this.$refs['tableStand'].query({})
    },
    load(tree, treeNode, resolve) {
      console.log(tree);
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            hasChildren:true
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            hasChildren:true
          }
        ])
      }, 1000)
    },
    ensureHandle(){

    },
    closePop(){
      this.$emit("closePop");
    },
    beforeClose(){
      this.$emit("closePop");
    },
    openDetails(row){

    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/styles/mixin";/*引入配置*/
.project-right >>> .el-table th {
  @include bg_color($background-color-theme1);
  height:30px;
  padding:0px;
}
.meeting{
  margin-top:0px !important;
}
  .project{
    height:400px;
  }
  .el-dialog{
    overflow:hidden;
  }
  .project-left{
    width:230px;
    height:400px;
    float:left;
    overflow:auto;
  }
  .project-right{
    margin-left:30px;
    width:500px;
    height:400px;
    float:left;
  }
  .dialog-footer{
    width:100%;
  }
  .project-right-top{
    width:100%;
    height:400px;
    overflow:auto;
  }
  .project-right-bottom{
    margin-top:10px;
    width:100%;
    height:140px;
    overflow:auto;
  }
  .project-left >>> .el-table .el-table__header th{
    height:40px;
    padding:0px;
  }
>>> .el-dialog__body{
  padding-top:10px;
  padding-bottom:10px;
}
</style>
